/*
 * @Author: szx
 * @Date: 2022-05-03 14:18:05
 * @LastEditTime: 2022-05-03 16:23:46
 * @Description:
 * @FilePath: \learn\React学习\github搜索\src\components\List\index.jsx
 */
import React, { Component } from 'react';

export default class index extends Component {
    render() {
        const { isFirst, isLoading, err, users } = this.props;
        return (
            <div className="row">
                {isFirst ? (
                    <h2>欢迎使用，输入关键词，随后点击搜索</h2>
                ) : isLoading ? (
                    <h2>Loading....</h2>
                ) : err ? (
                    <h2 style={{ color: 'red' }}>{err}</h2>
                ) : (
                    users.map((user) => {
                        return (
                            <div key={user.id} className="card">
                                <a rel="noreferrer" href={user.html_url} target="_blank">
                                    <img alt="avatar" src={user.avatar_url} style={{ width: '100px' }} />
                                </a>
                                <p className="card-text">{user.login}</p>
                            </div>
                        );
                    })
                )}
            </div>
        );
    }
}
